<template>
  <div class="verify">
    <div class="typeBox">
      <div>类型：</div>
      <div class="type" v-for="item in 5" :key="item" @click="handleType(item)">
        type: <span >{{ item }}</span>
      </div>
    </div>
    <verify @success="onVerifySuccess" @error="onVerifyError" :type="type" :codeLength="4"></verify>
  </div>
</template>

<script>
import Verify from "vue2-verify";
export default {
  components: {Verify},
  props: {},
  data () {
    return {
      verifyVisible: false,
      type: 1,// 1:picture  2:compute  3:slide  4:puzzie  5:pick
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    handleType(val) {
      this.type = val;
    },
    onVerifySuccess(obj) {
      //验证码正确回调
      setTimeout(() => {
        this.verifyVisible = false;
        this.onClick(this.verifyCode);
      }, 300);
    },
    onVerifyError(obj) {
      //验证码错误回调
      console.log("verify error");
      //错误刷新验证码
      obj.refresh();
    },
  },
}
</script>

<style lang="scss" scoped>
.verify {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #fff;
  .typeBox{
    display: flex;
    align-items: center;
    .type{
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 20px;
      cursor: pointer;
      padding: 5px 10px;
      background-color: #b2d6db;
      border: 1px solid #efeeee;
      border-radius: 5px;
    }
  }
}
</style>